<template>
  <div ref="wrapper" class="page-scroll-wrapper">
    <div class="page-scroll-content" @scroll="handlerScrool($event)">
      <div class="loading-wrapper text-center">
        <img class="loading-img" src="~@/assets/svg/loading.svg" alt="" />
      </div>
      <ul class="listBox" :class="fromType">
        <WorkItem v-for="(work, index) in portList" :key="index" :work="work" class="port-work-item">
        </WorkItem>
      </ul>
      <div v-if="(Array.isArray(portList) && portList.length > 0) || isLoading" class="padding-xl text-center"
        style="margin-bottom: 10px;">
        <span v-if="isLoading">加载中···</span>
        <span v-else-if="isEmpty">没有更多了~</span>
        <span v-else>下拉加载更多~</span>
      </div>
      <div v-else class="empty-box">暂无数据</div>
    </div>
  </div>
</template>

<script>

import WorkItem from './WorkItem.vue';
export default {
  components: {
    WorkItem,
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    itemInfo: {
      type: Object,
    },
    probeType: {
      type: [Number, String],
    },
    fromType: {
      type: String,
    },
    aParams: {
      type: Object,
    }
  },
  data() {
    return {
      page: {
        current: 1,
        totalCount: 0,
      },
      pageSize: 20,
      isPullingDown: false,
      isPullingUp: false,
      portList: [],
      isLoading: false,
    };
  },
  created() {
    this.$bus.$on("onRefresh", this.onRefresh);
  },
  computed: {
    isEmpty() {
      let isRes = true;
      isRes = (this.page.current * this.pageSize) >= this.page.totalCount ? true : false;
      return isRes;
    },
  },
  mounted() {
  },
  methods: {
    onRefresh(i) {
      if (i == this.probeType)
        this.fetchData(1);
    },
    handlerScrool(e) {
      const dom = e.target
      var scrollTop = dom.scrollTop; //滑入屏幕上方的高度
      var windowHeitht = dom.clientHeight; //能看到的页面的高度
      var scrollHeight = dom.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
      let total = scrollTop + windowHeitht
      if (total == scrollHeight || scrollHeight - total < 80) {
        if (!this.isEmpty) {
          this.fetchData(this.page.current + 1)
        }
      }
    },
    fetchData(curN) {
      let cur = this.page.current;
      let fromType = this.fromType
      let url;
      if (curN) {
        cur = curN;
      }
      if (this.isLoading == true) {
        return;
      }
      const params = {
        ...this.aParams,
        pageNum: cur,
        pageSize: this.pageSize,
      };
      if (fromType == 'onePort') {
        url = this.$queryQingdaoPortData;
        params['companyName'] = this.itemInfo.name;
      } else if (['oneType',].includes(fromType)) {
        url = this.$queryFormDataByCategory;
        params['category'] = this.itemInfo.currentType || this.itemInfo.name;
      } else if (fromType == 'oneTypeFire') {
        url = this.$queryFormDataByDHCategory;
        params['level'] = this.itemInfo.level;
      } else if (fromType == 'workOther') {
        console.log('this.itemInfo==',this.itemInfo);
        
        url = this.$queryFormDataByCategory;
        params['category'] = this.itemInfo.name;
        params['portName'] = this.itemInfo.portName;
      } else if (fromType == 'workFirle') {
        url = this.$queryFormDataByDHCategory;
        params['level'] = this.itemInfo.level;
        params['portName'] = this.itemInfo.portName;
      } else if (fromType == 'workLevel') {
        url = this.$queryFormDataByCategory;
        params['category'] = this.itemInfo.level;
        params['portName'] = this.itemInfo.portName;
      } else if (fromType == 'real') {
        url = this.$getHiddenOrRaleFlow;
        params['companyId'] = this.itemInfo.id
      } else if (fromType == 'port') {
        url = this.$queryQingdaoPortData;
        params['portName'] = this.itemInfo.name
      }
      if (!url) {
        return;
      }
      this.isLoading = true;
      if (cur === 1) {
        this.portList = [];
      }
      this.getAxios(url, params).then((res) => {
        if (res.code == 0) {
          let list = res.page.list;
          this.page['totalCount'] = res.page.totalCount;
          if (cur == 1) {
            this.portList = list;
          } else {
            this.portList = this.portList.concat(list);
          }
        }
      }).finally(() => {
        this.page.current = cur;
        this.isLoading = false;
      }).catch(() => { });
    },
  },
  beforeDestroy() {
    this.$bus.$off("headInfo");
  },
  watch: {
    probeType: {
      handler(nVal, oVal) {
        this.page = {
          ...this.page,
          current: 1,
        }
        this.fetchData();
      },
      immediate: true,
    }
  }
};
</script>
<style lang="less" scoped>
.page-scroll-wrapper {
  height: 100%;
  user-select: none;


  .page-scroll-content {
    position: relative;
    height: 100%;
    overflow-y: auto;
    padding-right: 4px;
  }

  ::-webkit-scrollbar {
    width: 6px !important;
  }

  ::-webkit-scrollbar-thumb {
    background: #cdcdcd22;
    cursor: pointer;
  }

  .loading-wrapper {
    position: absolute;
    width: 100%;
    transform: translateY(-100%) translateZ(0);
    padding: 10px;
  }

  .loading-img {
    width: 50px;
    height: 50px;
  }

  .empty-box {
    text-align: center;
    padding-top: 10%;
  }
}

.onePort {
  overflow-x: hidden;

  .port-work-item {
    width: calc(100%);
  }
}

.listBox {
  padding-left: 0px;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
}

.workOther {
  .port-work-item {
    width: calc(25% - 20px);
    margin: 0px 10px 20px;
  }
}

.workFirle {
  .port-work-item {
    width: calc(100% - 10px);
    margin: 0px;
  }
}

.workLevel {
  .port-work-item {
    width: calc(100%);
    margin: 0px 0px 0px;
  }
}

.real,
.port {
  .port-work-item {
    width: 100%;
  }

  ::v--deep {
    .port-work-list {
      margin-left: 0px !important;
    }
  }
}

.port-work-item {
  margin-bottom: 10px;
}
</style>
